<!DOCTYPE >
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>选项列表</title>
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/right.css">
<script type="text/javascript" src="__PUBLIC__/home/js/jquery.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/system.js"></script>
<script type="text/javascript" src="__PUBLIC__/home/js/admin.js"></script>
<script type="text/javascript"  src="__PUBLIC__/home/js/tab.js"></script>
<style>
    .setting{
        width: 500px;
    }
    .setting dl dd{
      float:left;  
      margin:6px;
       display: block;
    }
    
    .content{
        margin: 0 auto;
        width: 100%;
        text-align: center;
        height: auto;
        overflow: hidden;
    }
     .content dl{
        display: block;
        width: 500px;
        height: 50px;
    }
    .content dl dd{
        display:block;
        float:left;
    }
    .award_title{
        height: 26px;
        padding: 1px;
        font-size: 18px;
    }
     .award_input{
        padding: 0px;
        margin: 0;
    }
    .award_input input{
        font-size: 12px;
        width: 232px;
        height: 28px;
        padding: 0;
        overflow: hidden;
        color: #636363;
        outline: none;
        border-radius:4px;
    }
    a, a:hover { text-decoration: none; color: #333; }
    ul, li { list-style: none; }

    .tab {
      width: 725px;
      margin: 0 auto;
    }
    .tab-title {
      height: 30px;
      font-size: 0;
      background-color: #f5f5f5;
    }
    .tab-title .item {
     display: inline-block;
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    color: #333;
    font-size: 16px;
    }
    .tab-title .item-cur {
      color: #fff;
      background-color: #80b600;
    }
    .tab-cont {
      position: relative;
      border: 1px solid #000;
      width: 725px;
      height: 200px;
      overflow: hidden;
    }
    .tab-cont__wrap {
      position: absolute;
    }
    .tab-cont .item {
      width: 725px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      color: #000;
    }
</style>
</head>
<body>
    <div class="basic bor">
        <div class="title fl">当前位置：应用管理 > 应用列表></div>
        <div class="basic_r fr"><a href="{:U('Index/setting')}">基本信息</a></div>
    </div>

<div id = "J_list" > 
    <div class="addnav">
        <a class="submit fr addnews" href="javascript:;" id ="J_addItem"  />添加选项</a>
    </div> 
    <div class="catelist">
        <div class="lists listsov">
        <dd>中奖选项</dd> 
        <div class="button">
            <ol>
                <li class="fl" onclick="next()"><</li>
                <li class="fr" onclick="prev()">></li>
            </ol> 
        </div>
        </div> 
    </div>  
    <table border="1"  class="table table-hover text-center" id='list'>
      <tr class="trcolor"> 
        <td>奖项名称</td>
        <td>创建时间</td>
        <td>排序</td>
        <td colspan="3">操作</td>
     
      </tr>  
    <volist name="award_list" id="li">
      <tr> 
        <td>{$li.name}</td>
        <td><?php echo date('Y-m-d H:i:s',$li['ctime']) ?></td>
        <td>{$li.sort}</td>
        <td class="color444 textleft_lover"> 
        <span class="addname">
        <a href="javascript:;" class ="edit" data-id ="{$li.id}" data-name ="{$li.name}" data-type = "{$li.type}"
           data-item1 ="{$li.item1}" data-item2 ="{$li.item2}" data-item3 ="{$li.item3}" data-item4 ="{$li.item4}" data-item5 ="{$li.item5}" data-sort = "{$li.sort}" >编辑</a></span>
        |<span class="addname"><a href="javascript" data-id ="{$li.id}" class="delete"  >删除</a></span></td>
        </td>
      </tr>
    </volist> 
    </table>
    <div class="pages">
       <span class="allxz fl"><input class="checkbox bor" id="all"  type="checkbox" value="3" /></span>  
        <div class="page_s fr">{$page}</div>
    </div>
    </div>

<div class="notice" id= "J_add" >
        <div class="n_title">
            <span class="fl">添加选项</span>
        </div>
            <div class="content">
            <div style ="display: block;">
            <form action="">
               <div class="tab" js-tab="1">
                    <div class="tab-title">
                      <a href="javascript:;" class="item item-cur">奖项一</a>
                      <a href="javascript:;" class="item">奖项二</a>
                      <a href="javascript:;" class="item">奖项三</a>
                      <a href="javascript:;" class="item">奖项四</a>
                      <a href="javascript:;" class="item">奖项五</a>
                      <a href="javascript:;" class="item">奖项六</a>
                      <a href="javascript:;" class="item">奖项七</a>
                      <a href="javascript:;" class="item">奖项八</a>
                      <a href="javascript:;" class="item">奖项九</a>
                    </div>
                    <div class="tab-cont">
                      <ul class="tab-cont__wrap">
                        <li class="item">
                         <dl>
                            <dd class="setting_t fl">答案选项一:</dd>
                            <dd class="setting_p fl">
                            <input class="seinp" type="text" name="item1" id ="J_item1">
                                <span>答案选项不能为空</span>
                            </dd> 
                        </dl> 
                        <dl>
                            <dd class="setting_t fl">奖项中奖几率:</dd>
                            <dd class="setting_p fl">
                            <input class="seinp" type="text" name="item1" id ="J_item1">
                                <span>奖项中奖几率不能为空</span>
                            </dd> 
                        </dl>
                        </li>
                        <li class="item">Cont2</li>
                        <li class="item">Cont3</li>
                        <li class="item">Cont4</li>
                        <li class="item">Cont5</li>
                        <li class="item">Cont6</li>
                        <li class="item">Cont7</li>
                        <li class="item">Cont8</li>
                        <li class="item">Cont9</li>
                      </ul>
                    </div>
                </div> 
                <div>
                    <dl> 
                        <dd class="setting_t fl"> &nbsp;</dd>
                        <dd class="setting_p fl">
                        <input  type="hidden" name="app_id" value="{$_GET['id']}">
                        <input class="submit" type="button"  id ="J_submit" value="保存"> 
                        </dd>
                    </dl>
                </div>
                </form>
            </div>
    </div>
</div>
</div>
<script>

$('[js-tab=1]').tab({
    curDisplay: 1,
    changeMethod: 'horizontal'
  });
    $(function(){
        $("#J_more").hide();    
        $("#J_addItem").click(function(){
         $("#J_list").hide();
         $("#J_add").show();
        });
        $("#J_type").change(function(){
            var type = $(this).val(); 
            if(type == 1 || type == 2 ){
                $("#J_more").show();     
            }else{
                $("#J_more").hide();     
            }
        });
        //提交表单
        $("#J_submit").click(function(){
            var url = "{:U('Application/ajaxSubmit')}";
            var data = $('#itemForm').serializeArray(); 
            $.ajax({
                    type: "POST",
                    dataType: 'json',
                    async: false,
                    url: url,
                    data: data,
                    success: function(res){
                        if (res.status == '1') {
                            alert(res.info);
                            window.location.reload();
                        }else{
                            alert(res.info);
                            return false;
                        }
                    },
                    error: function(){
                    },
            });
        });
       //编辑
        $(".edit").click(function(){
        var this_t = $(this);
        var id = this_t.attr('data-id');
        var type = this_t.attr('data-type');
        var name = this_t.attr('data-name');
        var item1 = this_t.attr('data-item1');
        var item2 = this_t.attr('data-item2');
        var item3 = this_t.attr('data-item3');
        var item4 = this_t.attr('data-item4');
        var item5 = this_t.attr('data-item5');
        $("#J_id").val(id);
        $("#J_name").val(name);
        $("#J_type").val(type);
        if(type == 1 || type ==2){
            $("#J_item1").val(item1);
            $("#J_item2").val(item2);
            $("#J_item3").val(item3);
            $("#J_item4").val(item4);
            $("#J_item4").val(item4);
            $("#J_more").show();     
        }else{
            $("#J_more").hide();     
        }
        var sort = this_t.attr('data-sort');
       $("#J_list").hide();
       $("#J_add").show();
        });
    //删除
    $(".delete").click(function(){
        var id = $(this).attr('data-id');
        var url = "{:U('Application/deleteApp')}";
        var data = {"id":id}; 
        $.ajax({
                type: "POST",
                dataType: 'json',
                async: false,
                url: url,
                data: data,
                success: function(res){
                    if (res.status == '1') {
                        alert(res.info);
                        window.location.reload();
                    }else{
                        alert(res.info);
                        return false;
                    }
                },
                error: function(){
                },
        });

    });
    

    });

</script>
<!-- 提示 -->
<p class="ts"><span class="colorf00">*</span><span class="ts_text"> 如果要修排序请直接点击文字修改。</span></p>
</body>
</html>